<template>
    <el-form ref="form" :model="item.tpl" v-if="item.tpl" label-width="100px" size="mini">
        <c-border :border="item.tpl.mainnav.border" label="分割线"></c-border>
        <!--<c-bg :bg="item.tpl.mainnav.bg" label="背景" mclass="bb"></c-bg>-->
        <el-form-item label="背景色">
            <color-picker v-model="item.tpl.mainnav.backgroundColor" size="mini" show-alpha></color-picker>
        </el-form-item>

        <c-margin :margin="item.tpl.mainnav.padding" v-if="item.tpl.mainnav.padding" label="内距" mclass="bb"></c-margin>

        <el-form-item label="默认颜色">
            <el-tooltip class="item" effect="dark" content="图标颜色" placement="top">
                <color-picker v-model="item.tpl.mainnav.icon.color" size="small" show-alpha></color-picker>
            </el-tooltip>
        </el-form-item>
        <el-form-item label="选中颜色">
            <el-tooltip class="item" effect="dark" content="图标颜色" placement="top">
                <color-picker v-model="item.tpl.mainnav.icon.activeColor" size="small" show-alpha></color-picker>
            </el-tooltip>
        </el-form-item>
        <el-form-item label="图标大小">
            <!--<el-input-number v-model="icon.size"
                             :min="10" :max="50" size="mini" style="width:90px;"></el-input-number>-->
            <el-col :span="14">
                <el-slider
                    v-model="item.tpl.mainnav.icon.size"
                    input-size="mini"
                    height="20"
                    :min="10" :max="50"
                    size="mini">
                </el-slider>
            </el-col>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8" class="tip-txt">字/图大小</el-col>
        </el-form-item>

        <el-form-item label="占用尺寸" style="border-bottom: 1px dashed #AAA;">
            <el-col :span="14">
                <el-slider
                    v-model="item.tpl.mainnav.icon.width"
                    input-size="mini"
                    height="20"
                    size="mini">
                </el-slider>
            </el-col>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="8" class="tip-txt">占用尺寸</el-col>
        </el-form-item>

        <c-txt :txt="item.tpl.mainnav.vtitle" label="标题" :hidden-content="true" :hidden-color="true"></c-txt>
    </el-form>
</template>

<script type="text/javascript">

    import { mapState, mapActions } from 'vuex';

    import cBg from '../common-ele/bg';
    import cBorder from '../common-ele/border';
    import cIcon from '../common-ele/icon';
    import cTxt from '../common-ele/txt';
    import cMargin from '../common-ele/margin';

    export default {
        props: [ 'item'],
        data () {
            return {}
        },
        mounted: function () {},
        components: {
            cBg,
            cBorder,
            cIcon,
            cTxt,
            cMargin
        },
        watch: {

        },
        computed: mapState([

        ]),
        filters: {

        },
        methods: {
            ...mapActions([

            ]),
        }
    }
</script>

<style lang="scss">
    .form-props {
        .control-label{
            padding-left:0px;
            padding-right: 0px;
        }

        .table{
            tr {
                td{
                    padding:0px;
                    vertical-align: middle;
                    text-align: center;
                    font-size: 13px;

                    input.form-control{
                        border:none;
                        font-size:13px;
                    }
                    i.ic-btn{
                        cursor: pointer;
                        color: #337ab7;

                        &:hover{
                             color: #235ac7;
                        }
                    }
                }
                th{
                    padding: 8px 5px;
                    font-size: 13px;
                    font-weight: normal;
                }
            }
        }
        .sel-noborder{
            width:100%;
            border:none;
            outline:none;
            font-size: 13px;
            padding: 3px;
        }
    }
    .nav-theme-img-wrap {
        position: relative;
        width:200px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor:pointer;

        .el-button {
            display: none;
        }

        .nav-theme-choose-txt {
            display: none;
            position: absolute;
            z-index:10;
            color: #FFF;
            border:1px solid #FFF;
            border-radius: 5px;
            padding: 0px 10px;
        }
        &:hover {
            &:before {
                 content: ' ';
                 position: absolute;
                 left:0;
                 right:0;
                 top:0;
                 bottom:0;
                 opacity:0.5;
                 background: #000;
                 z-index:1;
             }
            .nav-theme-choose-txt {
                display: block;
            }
        }
    }
</style>
